import React, { useEffect } from 'react';
import { connect, history } from 'umi';
import { Form, Input, Checkbox, Button } from 'antd';

const AuthLogin = (props) => {
    const { dispatch } = props;
    const [form] = Form.useForm();

    useEffect(() => {
        dispatch({
            type: 'auth/getUserInfo',
        });
    }, [])

    const handleSubmit = async () => {
        const values = await form.validateFields();
        console.log('values', values)
    };

    return <>
        <Form form={form}>
            <Form.Item
                name='email'
                rules={[{ required: true, message: '必填项' }]}
            >
                <Input placeholder='邮箱' size='large' />
            </Form.Item>
            <Form.Item
                name='password'
                rules={[{ required: true, message: '必填项' }]}
            >
                <Input.Password placeholder='密码' size='large' />
            </Form.Item>
            <Form.Item
                name="persist"
                valuePropName="checked"
            >
                <Checkbox>保持登录</Checkbox>
            </Form.Item>
            <Form.Item>
                <Button style={{ width: '100%' }} size='large' type='primary' onClick={handleSubmit}>立即登录</Button>
            </Form.Item>
        </Form>
        <div className='footer_area'>
            <a onClick={() => history.push('/auth/register')}>{`->立即注册`}</a>
        </div>
    </>
};

export default connect(({ auth }) => ({
    auth,
}))(AuthLogin);